<template>
  <op-dialog
    ref="dialogRef"
    width="800px"
    :title="title"
    :buttonList="dialogButtonList"
    v-bind="dialogConfig"
    @confirm="confirm"
    @cancel="cancel"
  >
    <slot name="before"></slot>
    <op-upload-drag ref="dragRef" v-bind="uploadConfig" v-model="fileList" />
    <slot name="after"></slot>
  </op-dialog>
</template>
<script setup>
const props = defineProps({
  title: {
    type: String,
    default: 'Upload',
  },
  buttonList: {
    type: Array,
    default: () => [],
  },
  btnLoading: {
    type: Boolean,
    default: false,
  },
  uploadConfig: {
    type: Object,
    default: () => ({}),
  },
  dialogConfig: {
    type: Object,
    default: () => ({}),
  },
});
const emits = defineEmits(['confirm', 'cancel']);
const dialogRef = ref();
const dragRef = ref();

const fileList = ref([]);

const dialogButtonList = computed(() => {
  if (props.buttonList?.length) {
    return props.buttonList;
  } else {
    return [
      { prop: 'cancel', label: 'Cancel', type: '', disabled: props.btnLoading },
      {
        prop: 'confirm',
        label: 'Upload',
        type: 'primary',
        loading: props.btnLoading,
      },
    ];
  }
});

const init = row => {
  dialogRef.value.init(row);
  fileList.value = row.fileList;
  nextTick(() => {
    dragRef.value.resetFileList();
  });
};
const destroy = () => {
  dialogRef.value.destroy();
};
const confirm = row => {
  emits('confirm', { ...row, fileList: fileList.value });
};

const cancel = () => {
  emits('cancel');
};
defineExpose({ init, destroy });
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: bold;
  font-size: 18px;
}
</style>
